<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="magic.css" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- ========================================================================================== -->
	<div id="conteneur">
		<h1 id="header">
			<a href="index.html" title="Colored design - Acceuil">
				<span>Colored Design</span>
			</a>
		</h1>
			<ul id="menu">
				<li><a href ="index.html">Etape n°1</a></li>
				<li><a href ="etape2.html">Etape n°2</a></li>
				<li><a href ="etape3.html">Etape n°3</a></li>
				<li><a href ="etape4.html">Etape n°4</a></li>
				<li><a href ="etape5.html">Etape n°5</a></li>
			</ul>
		<div id="contenu">
			<h2>Etape numéro 1 : Paragraphes</h2>
			<p>
			Paragraphe 1 : Que serait le monde sans couleurs ?? Les couleurs occupent une place si importante dans la vie de l'individu qu'il n'est pas étonnant qu'on leur octroie des significations spécifiques. Le rouge, Ã  lui seul, est un univers de symboles. Il incarne la vie par son association au sang, l'amour par sa filiation au cÅur, la colÃšre, etc. Apprenez ici le sens de toutes les couleursâŠ 
			</p>
			<p>
			Paragraphe 2 : Découvrez tout le potentiel des couleurs dans notre dictionnaire en ligne. Des conditions d'agencement aux impacts sur l'humeur des individus, voyez comment utiliser les différentes teintes du cercle chromatique, apprenez les codes couleurs et réalisez vos projets en couleursâŠ Tout simple ! 
			</p>
			<p>
			Paragraphe 3 : Vous trouverez sous cette rubrique des liens pour accroÃ®tre votre savoir de la couleur. Sites d'arts picturaux, sites de symbolisme chromatique, sites de techniques graphiques, sites de chromothérapie, sites de décoration, sites de conversion des couleurs, etc. Plusieurs domaines dans lesquelles la couleur se distingue vous sont proposés iciâŠ
			</p>
			<p>
			Paragraphe 4 : Dans le langage de l'imprimerie, les couleurs se traduisent par des codes. Les premiÃšres formules se destinaient aux presses traditionnelles puis aux presses numériques. Il a donc fallu munir les couleurs de codes pour l'informatique. Apprenez maintenant la conversion html. 
			</p>
		</div>
		<p id="footer">
			Réalisation des codes xhtml &amp; css, du tutoriel et du design par Stéphane Ducamp
		</p>
	</div>
<!-- ========================================================================================== -->

	<ul id="menuDeroulant">
		<li><a href="#">Partie 1</a>
			<ul class="sousMenu">
				<li><a href="index.html">castor</a></li>
				<li><a href="#">aligator</a></li>
				<li><a href="#">musclor</a></li>
			</ul></li>
		<li><a href="#">Partie 2</a>
			<ul class="sousMenu">
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
			</ul></li>
		<li><a href="#">Partie 3</a>
			<ul class="sousMenu">
				<li><a href="#">pommes</a></li>
				<li><a href="#">poires</a></li>
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>
				<li><a href="#">raisins</a></li>
				<li><a href="#">framboises</a></li>
				<li><a href="#">fraises</a></li>
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
			</ul></li>
		<li><a href="#">Partie 4</a>
			<ul class="sousMenu">
				<li><a href="#">tomates</a></li>
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
				<li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>
				<li><a href="#">courgettes</a></li>
				<li><a href="#">endives</a></li>
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul></li>
	</ul>

</body>
</html>